<template>
   <el-tabs v-model="activeName"  @tab-click="handleClick" class="region-tab">
     <el-tab-pane label="基本信息" name="first">
       <div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addOrUpdate()">添加下级区域信息</el-button>
          <el-button type="primary" @click="edit()" >编辑当前区域信息</el-button>
          <el-button type="danger" @click="deleteAddress()">删除当前区域信息</el-button>
        </span>
        <!--一标三实的信息-->
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px" style="margin-top:15px">
        <el-form-item label="地址元素类型" prop="type">
          <el-select v-model="dataForm.type" placeholder="请选择地址类型" :disabled=true>
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域名称" prop="name">
          <el-input v-model="dataForm.name" placeholder="区域名称" :disabled= "isDisable"></el-input>
        </el-form-item>
        <el-form-item label="别名" prop="alias">
          <el-input v-model="dataForm.alias" placeholder="别名" :disabled= "isDisable"></el-input>
        </el-form-item>
        <el-form-item label="区域代码" prop="code">
          <el-input v-model="dataForm.code" placeholder="区划代码" :disabled= "isDisable"></el-input>
        </el-form-item>

        <el-form-item label="设立日期" prop="establishmentDate">
        <el-date-picker
          v-model="dataForm.establishmentDate"
          type="date"
          placeholder="选择设立日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :disabled= "isDisable">
        </el-date-picker>
        </el-form-item>
        <el-form-item label="撤销时间" prop="cancellationTime">
        <el-date-picker
          v-model="dataForm.cancellationTime"
          type="date"
          placeholder="选择撤销时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :disabled= "isDisable">
        </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间" prop="updateTime">
        <el-date-picker
          v-model="dataForm.updateTime"
          type="date"
          placeholder="选择更新时间"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :disabled= "isDisable">
        </el-date-picker>
        </el-form-item>
        <el-form-item label="启用日期" prop="openingDate">
        <el-date-picker
          v-model="dataForm.openingDate"
          type="date"
          placeholder="选择启用日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :disabled= "isDisable">
        </el-date-picker>
        </el-form-item>
        <el-form-item label="停用日期" prop="deactivationDate">
        <el-date-picker
          v-model="dataForm.deactivationDate"
          type="date"
          placeholder="选择停用日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :disabled= "isDisable">
          </el-date-picker>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" >
          <el-button v-if="!this.isDisable"  type="primary" @click="submit()" >{{ $t('handle.confirm') }}</el-button>
          <el-button v-if="!this.isDisable" @click="cancel()">{{ $t('handle.cancel') }}</el-button>
        </span>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" ></add-or-update>
      </div>
     </el-tab-pane>
     <el-tab-pane label="小区附属信息" name="second" v-if="showHousing">
       <div>
        <el-form :model="housForm" :rules="HousRule" ref="housForm" label-width="180px">
          <el-form-item label="小区全称" prop="fullName">
            <el-input v-model="housForm.fullName" placeholder="小区全称" :disabled= "isDisable"></el-input>
          </el-form-item>
          <el-form-item label="小区简称" prop="shortName">
            <el-input v-model="housForm.shortName" placeholder="小区简称" :disabled= "isDisable"></el-input>
          </el-form-item>
          <el-form-item label="小区编码" prop="housCode">
            <el-input v-model="housForm.housCode" placeholder="小区编码" :disabled= "isDisable"></el-input>
          </el-form-item>
          <el-form-item label="选择网格" prop="graddingId">
            <el-input v-model="housForm.griddingName"  placeholder="网格" :disabled="true" style="width:90%"></el-input><el-button style="width:10%" type="info" :disabled="isInput" plain @click="griddingDialogOpen()">选择</el-button>
          </el-form-item>
          <el-form-item label="省/市/区/社区/居委会">
          <el-input v-model="housForm.pnames" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <address-Dialog v-if="addressVisible" ref="addressDialog" @receiveParameters="getAddressParameters"></address-Dialog>
       </div>
     </el-tab-pane>
     <el-tab-pane label="楼栋附属信息" name="third" v-if="showBuilding">
       <div>
         <el-form :model="buildForm" :rules="buildRule" ref="buildForm" label-width="130px">
          <el-form-item prop="buildingParentId" label="上一级区域">
            <el-input v-model="buildForm.buildingParentId" placeholder="上一级区域" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item prop="buildingFullName" label="楼栋全称" >
            <el-input v-model="buildForm.buildingFullName" placeholder="楼栋全称" :disabled="isDisable"></el-input>
          </el-form-item>
          <el-form-item prop="buildingShortName" label="楼栋简称" >
            <el-input v-model="buildForm.buildingShortName" placeholder="楼栋简称" :disabled="isDisable"></el-input>
          </el-form-item>
          <!-- <el-form-item label="选择网格" prop="graddingId">
            <el-input v-model="buildForm.griddingName"  placeholder="网格" :disabled="isDisable" style="width:90%"></el-input><el-button style="width:10%" type="info" :disabled="isInput" plain @click="griddingDialogOpen()">选择</el-button>
          </el-form-item> -->
          <el-form-item prop="unitNumber" label="单元号" >
            <el-input v-model="buildForm.unitNumber" placeholder="单元号" :disabled="isDisable"></el-input>
          </el-form-item>
          <el-form-item prop="floorNumber" label="楼层数" >
            <el-input v-model="buildForm.floorNumber" placeholder="楼层数" :disabled="isDisable"></el-input>
          </el-form-item>
          <el-form-item prop="lowestLivingFloor" label="最低居住楼层" >
            <el-input v-model="buildForm.lowestLivingFloor" placeholder="最低居住楼层" :disabled="isDisable"></el-input>
          </el-form-item>
          <el-form-item prop="highestLivingFloor" label="最高居住楼层" >
            <el-input v-model="buildForm.highestLivingFloor" placeholder="最高居住楼层" :disabled="isDisable"></el-input>
          </el-form-item>
          <el-form-item prop="purpose" label="楼栋用途" >
            <!-- <el-input v-model="buildForm.purpose" placeholder="楼栋用途" :disabled="isDisable"></el-input> -->
            <el-select style="width: 100%;" v-model="buildForm.purpose" filterable placeholder="请选择" :disabled="isDisable">
              <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="manageName" label="物管联系人姓名" >
            <el-input v-model="buildForm.manageName" placeholder="物管联系人姓名" :disabled="isDisable"></el-input>
          </el-form-item>
          <el-form-item prop="managePhone" label="物管联系人电话" >
            <el-input v-model="buildForm.managePhone" placeholder="物管联系人电话" :disabled="isDisable"></el-input>
          </el-form-item>
        </el-form>
        <address-Dialog v-if="addressVisible" ref="addressDialog" @receiveParameters="getAddressParameters"></address-Dialog>
       </div>
     </el-tab-pane>
   </el-tabs>
</template>

<script>
import { getDictList } from "@/utils";
import AddOrUpdate from "./add-or-update";
import AddressDialog from "../griddingDialog";
export default {
  created() {
    this.getDictList();
    this.getPurpose();
  },
  components: {
    AddOrUpdate,
    "address-Dialog": AddressDialog
  },
  data() {
    return {
      addressVisible: "",
      isInput: true,
      option: "",
      formValidate: "",
      housFormValidate: "",
      buildingFormValidate: "",
      showHousing: false,
      showBuilding: false,
      superAdmin: sessionStorage.getItem("superAdmin"),
      activeName: "first",
      visible: false,
      isDisable: true,
      addOrUpdateVisible: false,
      typeList: "",
      dataForm: {
        id: 0,
        type: "",
        code: "",
        name: "",
        parentId: "",
        alias: "",
        isLeaf: "",
        pids: "",
        isAddress: "",
        establishmentDate: "",
        cancellationTime: "",
        updateTime: "",
        openingDate: "",
        deactivationDate: "",
      },
      housForm: {
        id: "",
        fullName: "",
        shortName: "",
        housCode: "",
        pnames: "",
        griddingName: "",
        graddingId: ""
      },
      buildForm: {
        id: "",
        buildingParentId: "",
        griddingId: "",
        buildingFullName: "",
        buildingShortName: "",
        unitNumber: "",
        floorNumber: "",
        lowestLivingFloor: "",
        highestLivingFloor: "",
        purpose: "",
        manageName: "",
        managePhone: "",
        griddingName: "",
        graddingId: ""
      },
      buildRule: {},
      HousRule: {},
      dataRule: {
        type: [
          { required: true, message: "地址元素类型不能为空", trigger: "blur" }
        ],
        code: [
          { required: true, message: "区划代码不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "区域名称不能为空", trigger: "blur" }
        ],
        parentId: [
          { required: true, message: "上级区域id不能为空", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    regionId() {
      return this.$store.state.address.regionId;
    }
  },
  methods: {
    griddingDialogOpen() {
      this.addressVisible = true;
      this.$nextTick(() => {
        this.$refs.addressDialog.init();
      });
    },
    getAddressParameters(data) {
      // this.buildForm.griddingId = data.selectId;
      // this.buildForm.griddingName = data.selectText;
      this.housForm.griddingId = data.selectId;
      this.housForm.griddingName = data.selectText;
    },
    getPurpose() {
      this.$http({
        url: "dg-ic/ic/dict/type/purpose_type",
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.option = data.data;
        }
      });
    },
    // tab 被选中时触发
    handleClick(tab, event) {},
    init() {
      this.$nextTick(() => {
        this.$http({
          url: `/dg-standard-info/dgstandardregion/info/${this.regionId}`,
          method: "get",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataForm.regionId = data.data.id;
            this.dataForm.type = data.data.type.id;
            this.dataForm.code = data.data.code;
            this.dataForm.name = data.data.name;
            this.dataForm.parentId = data.data.parentId;
            this.dataForm.alias = data.data.alias;
            this.dataForm.isLeaf = data.data.isLeaf;
            this.dataForm.pids = data.data.pids;
            this.dataForm.isAddress = data.data.isAddress;
            this.dataForm.establishmentDate = data.data.establishmentDate;
            this.dataForm.cancellationTime = data.data.cancellationTime;
            this.dataForm.updateTime = data.data.updateTime;
            this.dataForm.openingDate = data.data.openingDate;
            this.dataForm.deactivationDate = data.data.deactivationDate;
            if (data.data.type.id === 42) {
              // 如果查看详情是小区
              this.showHousing = true;
              this.showBuilding = false;
            } else if (data.data.type.id === 61) {
              this.showHousing = false;
              this.showBuilding = true;
            } else {
              this.showHousing = false;
              this.showBuilding = false;
            }
            //更新store状态
            this.$store.commit("address/updateRegionPnames", data.data.pnames);
            this.$store.commit(
              "address/updateRegionTypeList",
              this.typeList.filter(item => item.value > data.data.type.id)
            );
            this.$store.commit("address/updateRegionName", data.data.name);
          }
        });
      });
    },
    // 根据一标三实的id查询小区信息
    initHousing() {
      this.$nextTick(() => {
        this.$http({
          url: `/dg-ic/ic/housing-estate/info/${this.regionId}`,
          method: "get",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.housForm.housingId = data.data.id;
            this.housForm.fullName = data.data.fullName;
            this.housForm.shortName = data.data.shortName;
            this.housForm.housCode = data.data.code;
            this.housForm.pnames = data.data.pnames;
            this.housForm.griddingName = data.data.griddingName;
            this.housForm.graddingId = data.data.griddingId;
          }
        });
      });
    },
    initBuilding() {
      this.$nextTick(() => {
        this.$http({
          url: `/dg-ic/ic/building/info/${this.regionId}`,
          method: "get",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.buildForm.buildingId = data.data.id;
            this.buildForm.buildingParentId = data.data.pnames;
            this.buildForm.griddingId = data.data.griddingId;
            this.buildForm.buildingFullName = data.data.fullName;
            this.buildForm.buildingShortName = data.data.shortName;
            this.buildForm.unitNumber = data.data.unitNumber;
            this.buildForm.floorNumber = data.data.floorNumber;
            this.buildForm.lowestLivingFloor = data.data.lowestLivingFloor;
            this.buildForm.highestLivingFloor = data.data.highestLivingFloor;
            this.buildForm.purpose = data.data.purpose;
            this.buildForm.manageName = data.data.manageName;
            this.buildForm.managePhone = data.data.managePhone;
            this.buildForm.griddingName = data.data.griddingName;
            this.buildForm.graddingId = data.data.griddingId;
            // 返回网格的名称
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    // 新增 / 修改
    addOrUpdate() {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init();
      });
    },
    edit() {
      this.isDisable = false;
      this.isInput = false;
    },
    deleteAddress() {
      this.$http({
        url: `/dg-ic/ic/housing-estate/delete/${this.regionId}`,
        method: "delete",
        data: this.$http.adornData()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {}
          });
          this.$store.commit("address/updateIsRegionShow", false);
          this.global.refreshNode(this.global.treeNode.parent);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    cancel() {
      this.isDisable = true;
      this.isInput = true;
      this.init();
    },
    // 表单提交
    submit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.formValidate = true;
        }
      });
      if (this.showHousing) {
        this.$refs["housForm"].validate(valid1 => {
          if (valid1) {
            this.housFormValidate = true;
          }
        });
      }
      if (this.showBuilding) {
        this.$refs[`buildForm`].validate(valid2 => {
          if (valid2) {
            this.buildingFormValidate = true;
          }
        });
      }
      if (
        this.formValidate ||
        this.housFormValidate ||
        this.buildingFormValidate
      ) {
        this.$http({
          url: `/dg-ic/ic/housing-estate/saveOrUpdate`,
          method: "post",
          data: this.$http.adornData({
            // 区域
            regionId: this.dataForm.regionId,
            typeId: this.dataForm.type,
            code: this.dataForm.code,
            name: this.dataForm.name,
            parentId: this.dataForm.parentId,
            alias: this.dataForm.alias,
            establishmentDate: this.dataForm.establishmentDate,
            cancellationTime: this.dataForm.cancellationTime,
            updateTime: this.dataForm.updateTime,
            openingDate: this.dataForm.openingDate,
            deactivationDate: this.dataForm.deactivationDate,
            // 小区
            housingId: this.housForm.housingId,
            fullName: this.housForm.fullName,
            shortName: this.housForm.shortName,
            griddingId: this.housForm.griddingId,
            housCode: this.housForm.code,
            // 楼栋
            buildingId: this.buildForm.buildingId,
            buildingParentId: this.buildForm.parentId?this.buildForm.parentId:this.dataForm.parentId,
            // griddingId: this.buildForm.griddingId,
            buildingFullName: this.buildForm.buildingFullName,
            buildingShortName: this.buildForm.buildingShortName,
            unitNumber: this.buildForm.unitNumber,
            floorNumber: this.buildForm.floorNumber,
            lowestLivingFloor: this.buildForm.lowestLivingFloor,
            highestLivingFloor: this.buildForm.highestLivingFloor,
            purpose: this.buildForm.purpose,
            manageName: this.buildForm.manageName,
            managePhone: this.buildForm.managePhone
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.isDisable = true;
            this.isInput = true;
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.visible = false;
                this.$emit("refreshDataList");
                this.$nextTick(() => {
                  if (this.$refs[`dataForm`].resetFields() !== undefined) {
                    this.$refs[`dataForm`].resetFields();
                  }
                  if (this.showHousing) {
                    this.housForm = {};
                    this.showHousing = false;
                    this.activeName = "first";
                  }
                  if (this.showBuilding) {
                    this.buildForm = {};
                    this.showBuilding = false;
                    this.activeName = "first";
                  }
                });
              }
            });
            if (data.data === 1) {
              //判断返回子集条数来更新node
              this.global.refreshNode(this.global.treeNode.parent);
            } else {
              this.global.refreshNode(this.global.treeNode);
            }
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
    getDictList() {
      this.$http({
        url: `/dg-standard-info/dgregiontype/regiontypedictlist`,
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.typeList = data.data;
        }
      });
    }
  }
};
</script>

<style lang="scss" >
//解决两个tab嵌套按钮不显示bug
#pane-first {
  height: 660px;
}
.dialog-footer {
  margin-left: 55px;
}
</style>

